<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 使用
        myChart.showLoading();

        $.getJSON('data/obama_budget_proposal_2012.list.json', function (obama_budget_2012) {
            myChart.hideLoading();

            option = {
                title : {
                  show : true,
                  text : '每日活跃用户',
                  x : 'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                toolbox : {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                legend: {
                    data:['Budget 2011', 'Budget 2012'],
                    itemGap: 5,
                    left: '5%',
                },
                grid: {
                    top: '12%',
                    left: '1%',
                    right: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type : 'category',
                        data : obama_budget_2012.names
                    }
                ],
                yAxis: [
                    {
                        type : 'value',
                        axisLabel: {
                            formatter: function (a) {
                                a = +a;
                                return isFinite(a)
                                    ? echarts.format.addCommas(+a / 1000)
                                    : '';
                            }
                        }
                    }
                ],
                dataZoom: [
                    {
                        show: true,
                        start: 94,
                        end: 100,
                        handleSize: 8
                    },
                    {
                        type: 'inside',
                        start: 94,
                        end: 100
                    },
                    {
                        show: true,
                        yAxisIndex: 0,
                        filterMode: 'empty',
                        width: 12,
                        height: '70%',
                        handleSize: 8,
                        showDataShadow: false,
                        left: '93%'
                    }
                ],
                series : [
                    {
                        name: 'Budget 2011',
                        type: 'bar',
                        data: obama_budget_2012.budget2011List
                    },
                    {
                        name: 'Budget 2012',
                        type: 'bar',
                        data: obama_budget_2012.budget2012List
                    }
                ]
            };

            myChart.setOption(option);
          });
    </script>
</body>
